<template>
	<view class="content">
		<view class="list">
			<view class="item">
				<image src="../../../../../static/builder_simple1.png" mode="widthFix"></image>
				<view class="title">书房</view>
			</view>
			<view class="item">
				<image src="../../../../../static/builder_simple2.png" mode="widthFix"></image>
				<view class="title">客厅</view>
			</view>
			<view class="item">
				<image src="../../../../../static/builder_simple2.png" mode="widthFix"></image>
				<view class="title">客厅</view>
			</view>
		</view>
		<view class="btn" hover-class="btn-hover" type="default" size="mini" @click="isShowConfirm = true">预约</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="less">
.content {
	display: flex;
	flex-direction: column;
	
	.list {
		display: flex;
		flex-direction: column;
		box-sizing: content-box;
		
		.item {
			margin: 0 40rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			margin-top: 40rpx;
			
			image{
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}
			
			.title {
				text-align: center;
				padding: 20rpx 0;
				font-size: 24rpx;
			}
			
			.title::after {
				content: ' —';
				color: #3d9c36;
			}
			
			.title::before {
				content: '— ';
				color: #3d9c36;
			}
			
		}
	}
}
</style>
